<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改文章</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/detail.css">
</head>

<body class="layui-layout-body">

    <div class="layui-body inner-body">

        <!-- 内容主体区域 -->
        <div style="padding: 15px">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>
                    <button data-target="../../pages/articleManagement.html" class="layui-btn layui-btn-sm">
                        <a href="../../pages/articleManagement.html">返回</a>
                    </button>
                    修改文章
                </legend>
            </fieldset>

            <form class="layui-form" action="" lay-filter="updateForm" onsubmit="return false">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">文章标题</label>
                        <div class="layui-input-inline" style="width:500px;">
                            <input type="text" name="title" placeholder="请输入文章名称" lay-verify="required" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">发布日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="test29" placeholder="" name="publishDate">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <!-- <textarea class="layui-textarea" name="description"></textarea> -->
                            <div id="editor" name="description">

                            </div>
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="culum-addculum">修改文章</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
            </form>

        </div>
    </div>
    <script src="../../editor/wangEditor.min.js"></script>
    <script src="../../layui/jquery-1.12.4.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        var E = window.wangEditor;
        var editor = new E('#editor');
        editor.customConfig.uploadImgServer = '/api/upload';  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'imgfile';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data[0];
                insertImg(url)
            }
        }
        
        editor.create();

        function query(url) {
            const parst = url.split("?");
            if (parst.length == 1) {
                return {};
            }
            const obj = {};
            parst[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            })
            return obj;
        }

        const articlePage = query(location.href);

        //JavaScript代码区域
        layui.use(['form', "layer", "laydate"], async function () {
            let form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#test29'
                , theme: 'molv'
            });
            //得到
            const article = await $.getJSON("/api/Article/" + articlePage.id);
            console.log(article);
            // editor.txt.html(`<p>${article.description}</p>`);//设置富文本框内容
            editor.txt.html(article.content);
            form.val("updateForm", article);

            form.on("submit(culum-addculum)", function (data) {
                //$(editor.txt.html()).find("img").prop("src");
                var html = editor.txt.html(); // 获取 JSON 格式的内容
                const articleone = {
                    title: data.field.title,
                    publishDate: data.field.publishDate,
                    description: data.field.description,
                    content: html
                }
                // console.log(articleone);
                $.ajax({
                    url: "/api/Article/" + articlePage.id,
                    method: "put",
                    data: data.field

                })
                layer.msg('修改数据成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "../../pages/articleManagement.html";
                });
            });
        });
    </script>
</body>

</html>